<!DOCTYPE html>
<html>
<head>
	<title>注册</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta charset="utf-8">
	<link rel="stylesheet" href="../static/css/main.css">
	<script src="../static/js/vue.js"></script>
	<script src="../static/js/axios.js"></script>
	<script src="../static/js/uuid.js"></script>
	<script src="../static/js/main.js"></script>
</head>
<body>
	<div class="app" id="app">
    <img class="music" :class="music_play?'music2':''" @click="music_play=!music_play" src="../static/images/player.png">
    <div class="bg">
			<img src="../static/images/bg0.jpg">
		</div>
		<div class="form">
			<div class="form-title">
				<img src="../static/images/register.png">
				<img class="back" @click="game.openFrame('login','login.html')" src="../static/images/back.png">
			</div>
			<div class="form-data">
				<div class="form-data-bg">
					<img src="../static/images/bg1.png">
				</div>
				<div class="form-item">
					<label class="text">手机号</label>
					<input type="text" v-model="mobile" placeholder="请输入手机号">
				</div>
				<div class="form-item">
					<label class="text">验证码</label>
					<input type="text" class="code" v-model="code" placeholder="请输入验证码">
					<img class="refresh" @click="send_sms_code" src="../static/images/refresh.png">
				</div>
				<div class="form-item">
					<label class="text">密码</label>
					<input type="password" v-model="password" placeholder="请输入密码">
				</div>
				<div class="form-item">
					<label class="text">确认密码</label>
					<input type="password" v-model="password2" placeholder="请再次输入密码">
				</div>
				<div class="form-item">
					<input type="checkbox" class="agree" v-model="agree" checked>
					<label><span class="agree_text">同意磨方《用户协议》和《隐私协议》</span></label>
				</div>
				<div class="form-item">
					<img class="commit" @click="regsiterhandle" src="../static/images/commit.png"/>
				</div>
			</div>
		</div>
	</div>
	<script>
	apiready = function(){
		Vue.prototype.game = new Game("../static/mp3/bg1.mp3");
		new Vue({
			el:"#app",
			data(){
				return {
					mobile:"",
					code:"",
					password:"",
					password2:"",
					sms_interval: false, // 短信发送的冷却状态，false表示允许发送短信，true表示进入冷却状态
					agree:true,
          music_play:true,
					prev:{name:"",url:"",params:{}},
					current:{name:"register",url:"register.html","params":{}},
				}
			},
			watch:{
        music_play(){
          if(this.music_play){
            this.game.play_music("../static/mp3/bg1.mp3");
          }else{
            this.game.stop_music();
          }
        },
				mobile(){
					// 验证手机号
					if(this.check_mobile_format()){
						// 发送ajax
						this.http_check_mobile();
					}
				}
      },
			methods:{
				check_mobile_format(){
					return /^1[3-9]\d{9}$/.test(this.mobile);
				},
				http_check_mobile(){
					// 验证手机号是否注册了
					this.game.post(this,{
						method:"Users.mobile",
						params:{
							"mobile":this.mobile
						}
					});
				},
				regsiterhandle(){
					// 点击按钮的声音
					this.game.play_music('../static/mp3/btn1.mp3');

					// 验证数据
					// 双向验证：
					// 1. 客户端为了提高用户体验，较少不必要的服务端请求，会验证一遍。
					// 2. 服务端在接受数据保存到数据库前为了避免出现脏数据，为了安全考虑，会验证第二遍
					if(!this.check_mobile_format(this.mobile)){
						this.game.tips("手机号码格式不正确！");
						return false;
					}

					if(this.password.length<6 || this.password.length>16 || this.password!=this.password2){
						this.game.tips("密码或确认密码有误！");
						return false;
					}

					if(this.code.length<4){
						this.game.tips("短信验证码有误！");
						return false;
					}

					if(!this.agree){
						this.game.tips("对不起，必须同意魔方APP用户协议和隐私协议才可以进行用户注册");
						return false;
					}

					// 发送请求
					let self = this;
					this.game.post(this,{
						method:"Users.register",
						params:{
							"mobile": this.mobile,
							"password": this.password,
							"password2": this.password2,
							"sms_code": this.code,
						},
						success(response){
							if(response.data.result && response.data.result.errno == 1000){
								self.game.tips("注册成功！");
								// 进行页面的跳转
								setTimeout(()=>{
									self.game.openFrame("login","login.html");
								},2000);
							}
						}
					})
				},
				send_sms_code(){
					// 发送短信验证码
					if(!this.check_mobile_format(this.mobile)){
						this.game.tips("手机号码格式不正确！");
						return false;
					}

					if(this.sms_interval){
						this.game.tips("短信发送过于频繁！");
						return false;
					}

					// 发送短信
					let self = this;
					this.game.post(this,{
						method:"Home.code",
						params: {"mobile":this.mobile},
						success(response){
							if(response.data.result && response.data.result.errno == 1000){
								self.game.tips("短信发送成功！");
								self.sms_interval = true; // 进入冷却状态
								// 冷却时间倒计时
								let time = self.game.config.SMS_TIME_OUT;
								let timer = setInterval(()=>{
									if(--time<1){
										self.sms_interval = false; // 退出冷却状态，允许再次发送短信
										clearInterval(timer);      // 关闭倒计时功能
									}
								},1000);
							}
						}
					});
				}
			}
		})
	}
	</script>
</body>
</html>
